<template>
  <div>
    <h2>arrTest</h2>
    <p
      v-for="(item, index) in pageData.arr"
      :key="'index' + index"
      @click="clickItem(item)"
    >
      {{ `${item.name} ==> ${item.age}  ` }}
    </p>

    <button @click="click">click</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageData: {
        a: 1,
        b: 2,
        arr: [
          {
            name: 1,
            age: 1
          },
          {
            name: 2,
            age: 2
          },
          {
            name: 3,
            age: 3
          }
        ]
      }
    };
  },
  methods: {
    clickItem(item) {
      item.age = "jljlj";
    },
    click() {
      // this.pageData.arr[2] = "ljlj";
      // this.pageData.arr = [];
      this.pageData.arr = { name: 2, age: 33 };
    }
  }
};
</script>

<style lang="less" scoped>
button {
  margin: 2rem auto;
  display: block;
  padding: 0.02rem 0.1rem;
  background: blue;
  color: white;
}
</style>
